<template>
  <div class="message">
    <BreadCrumb>
      <template v-slot:first>首页</template>
      <template v-slot:second>留言</template>
      <template v-slot:third>留言</template>
    </BreadCrumb>
    <div class="message_main">
      <div class="message_lf">
        <p class="message_info">
          这是一个留言板<br />
          <br />
          欢迎大家前来留言~
        </p>
        <div class="message_comment">
          <Comment
            v-if="wordList.length !== 0"
            :comments="wordList"
            @onComment="onComment"
            @onReply="onReply"
            ref="wordCommentRef"
          ></Comment>
        </div>
      </div>
      <div class="message_rg" v-if="!appStore.isMobile">
        <Person></Person>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeMount, ref } from 'vue'
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import Person from '@/components/Person.vue'
  import Comment from '@/components/Comment.vue'
  import { queryWordListRequest, createWordRequest } from '@/network/api/word'
  import { localCache } from '@/utils/cache'
  import Message from 'vue-m-message'
  import formatComment from '@/utils/comments'
  import useUserStore from '@/store/userStore'
  import useAppStore from '@/store/appStore'

  const userStore = useUserStore()
  const appStore = useAppStore()
  const wordList = ref([])
  const wordCommentRef = ref(null)
  onBeforeMount(async () => {
    const result = await queryWordListRequest()
    wordList.value = formatComment(result.result)
  })
  const onComment = async comment => {
    if (!userStore.isLogin || !localCache.getCache('user'))
      return Message.warning('请先登录~')
    if (!comment) return Message.warning('未检测到文字~')
    const result = await createWordRequest(comment.trim(), null)
    wordCommentRef.value.reset()
    Message.success(result.msg)
  }
  const onReply = async (reply, id) => {
    if (!userStore.isLogin || !localCache.getCache('user'))
      return Message.warning('请先登录~')
    if (!reply) return Message.warning('未检测到文字~')
    const result = await createWordRequest(reply, id)
    Message.success(result.msg)
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .message {
      width: 100%;
      .message_main {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .message_lf {
          width: 78%;
          .message_info {
            padding: 56px;
            margin: 0;
            background: var(--background-secondary);
            border-radius: 16px;
            font-size: 16px;
          }
          .message_comment {
            width: 100%;
            margin-top: 30px;
            background: var(--background-secondary);
            border-radius: 16px;
          }
        }
        .message_rg {
          width: 20%;
        }
      }
    }
  }

  @media only screen and (max-width: 990px) {
    .message {
      width: 100%;
      .message_main {
        width: 100%;
        .message_lf {
          width: 100%;
          .message_info {
            padding: 30px;
            margin: 0;
            background: var(--background-secondary);
            border-radius: 16px;
            font-size: 16px;
          }
          .message_comment {
            width: 100%;
            margin-top: 20px;
            padding-top: 15px;
            background: var(--background-secondary);
            border-radius: 16px;
          }
        }
      }
    }
  }
</style>
